<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
    export default {
        name: 'barHoRi',
        props: {
            data: {
                type: Object,
                default() {
                    return {};
                },
            },
        },
        data: () => ({}),
        mounted() {
            this.drawChart();
        },
        methods: {
            drawChart() {
                const {myChart} = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        grid: {
                            top: 25,
                            left: 140,
                            right: 70,
                            bottom: 30,
                        },
                        xAxis: {
                            type: 'value',
                            axisTick: {
                                show: false,
                                alignWithLabel: true,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisLabel: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                            },
                            // max: this.maxValue
                        },
                        yAxis: {
                            type: 'category',
                            axisLabel: {
                                color: '#4EB2F2',
                                formatter(value, index) {
                                    let newValue;
                                    const
                                        arr = value.split('');
                                    if (value.length <= 11) {
                                        newValue = value;
                                    } else {
                                        arr.splice(11, 0, '\n');
                                        newValue = arr.join('');
                                    }
                                    if (value.length > 22) newValue = `${newValue.slice(0, 22)}...`;
                                    return `{text|${newValue}}`;
                                },
                                rich: {
                                    text: {
                                        align: 'left',
                                        fontSize:12,
                                        lineHeight:16,
                                    },
                                },
                                marginRight:10,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                                alignWithLabel: true,
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#26CEFA',
                                },
                            },
                            data: this.data.name,
                        },
                        series: [{
                            itemStyle: {
                                color: this.$echarts.graphic.LinearGradient(// 柱子颜色
                                    0, 0, 1, 0,
                                    [
                                        {offset: 1, color: '#1A83D2'},
                                        {offset: 0, color: '#0079FE'},
                                    ],
                                ),
                                borderRadius: [0, 4, 4, 0],
                            },
                            label: {
                                show: true, // 是否显示数值
                                position: 'insideRight',
                                offset: [70, 0],
                                distance: 5,
                                formatter: '{num|{c}台}',
                                rich: {
                                    num: {
                                        color: '#4EB2F2',
                                        align: 'right',
                                    }
                                },
                            },
                            barWidth: 15,
                            data: this.data.value,
                            type: 'bar',
                        }],
                    };
                    thisChart.setOption(option);
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            },
        },
    };
</script>
